import React, { useState } from "react";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { vscodeDark } from "@uiw/codemirror-theme-vscode";

import "@/tailwind-variables.less";

const CodeEditor: React.FC = () => {
  const [code, setCode] = useState<string>("Button");

  // 处理代码更新
  const handleCodeChange = (newCode: string) => {
    setCode(newCode);
  };

  return (
    <div className="w-[80vw]">
      <div style={{ marginTop: "20px" }}>
        <button onClick={() => alert("Button clicked!")}>
          {code.trim() || "Click me!"}
        </button>
      </div>
      <div>
        <CodeMirror
          value={code}
          height="300px"
          extensions={[javascript(), vscodeDark]}
          onChange={handleCodeChange}
        />
      </div>
    </div>
  );
};

export { CodeEditor };
